<template>
  <div class="Home">
    <ul class="fixed-select">
      <li v-for="(item, index) in data.fixedSelectData" :key="item.id" @click="selectComponent(item.id)"
        :class="[item.id === data.selectComponentId ? 'active' : '']">
        {{ item.value }}
      </li>
    </ul>
    <Leaflet v-if="data.selectComponentId === 1"></Leaflet>
    <LeafletSenior v-if="data.selectComponentId === 2"></LeafletSenior>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
// 引入组件
import Leaflet from "@/components/Leaflet.vue";
import LeafletSenior from "@/components/LeafletSenior.vue";

const data = reactive({
  // 组件切换
  fixedSelectData: [
    {
      value: "Leaflet",
      id: 1,
    },
    {
      value: "LeafletSenior",
      id: 2,
    },
  ],
  // 选中的组件id
  selectComponentId: 1,
})
// 点击切换组件
const selectComponent = (id: number): void => {
  data.selectComponentId = id;
}

</script>

<style lang="less" scoped>
.Home {
  width: 100%;
  height: 100%;

  .fixed-select {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1000;
    display: flex;
    align-items: center;
    background-color: #fff;

    >li {
      font-size: 20px;
      margin: 10px 10px;

      &.active {
        color: red;
      }
    }
  }
}
</style>